<template>
    <swiper class="swiper-box" :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="(loop, index) in loops" :key="loop.startTime+index">
            <img :src="loop.image_800">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>
<script>
export default {
    props:{
        loops:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    data(){
        return{
            swiperOption:{
                autoplay: 4000,//可选选项，自动滑动
                loop : true,
                pagination : '.swiper-pagination',
                // 关闭鼠标拖动后不自动滚动问题
                autoplayDisableOnInteraction:false
            }
        }
    },
    // methods:{
    //     loadLoops(){
    //         this.$api.loadDataForMultiget3({
    //             appPlat:"m",
    //             pids:"136556"
    //         }).then((data)=>{
    //             // data 为后台接收的真实数据
    //             if(!data.success){
    //                 return Promise.reject("请求失败");
    //             }
    //             console.log(data.data[136556].list);
    //             // this.loops = data.data[136556].list;
    //         }).catch((error)=>{
    //             console.log("请求失败",error);
    //         })
    //     }
    // },
    // mounted(){
    //     this.loadLoops();
    // }
};
</script>
<style lang="less" scoped>
.swiper-box{
    width: 100%;
    min-height: 260px;
    background-color: @de;
    margin-bottom: @box-bottom-margin;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}
</style>
